<template>
  <div>
    <input ref="file" type="file" @change="onFileChange" accept=".docx" />
    <div class="word-content" v-html="htmlContent"></div>
  </div>
</template>

<script>
import { paginateRichHTML, processPageHTML } from "../utils/utils";
export default {
  name: "HomePage",
  components: {},
  data() {
    return {
      htmlContent: "",
    };
  },
  timer: null,
  methods: {
    // 将DOCX转为HTML，保留样式
    async docxToHtml(file) {
      console.log("file: ", file);
      const arrayBuffer = await file.arrayBuffer();

      const options = {
        convertImage: mammoth.images.imgElement((image) => {
          return image.read("base64").then((imageData) => {
            return {
              src: `data:${image.contentType};base64,${imageData}`,
            };
          });
        }),
        styleMap: [
          "p[style-name='Normal'] => p:fresh",
          "p[style-name='Heading 1'] => h1:fresh",
          "p[style-name='Heading 2'] => h2:fresh",
          "p[style-name='Heading 3'] => h3:fresh",
          "br[page] => div.page-break:fresh",
        ],
      };

      try {
        const result = await mammoth.convertToHtml({ arrayBuffer }, options);
        console.log("result: ", result);

        // 后处理 HTML，确保样式被正确应用
        const processedHtml = result.value
          .replace(/<p>/g, '<p style="margin: 1em 0;">')
          .replace(/<p style="/g, '<p style="margin: 1em 0;')
          .replace(
            /<p([^>]*)align="([^"]*)"([^>]*)>/g,
            (match, pre, align, post) => {
              return `<p${pre}style="text-align:${align};"${post}>`;
            }
          );

        const pagesHtml = paginateRichHTML(processedHtml, 1000);
        console.log("pagesHtml: ", pagesHtml);
        const pageBreakHtml = processPageHTML(pagesHtml).join("");
        console.log("pageBreakHtml: ", pageBreakHtml);
        // 添加全局样式容器
        const styledHtml = `
          <div class="word-document">
            ${pageBreakHtml}
          </div>
        `;

        if (result.messages.length > 0) {
          console.log("Conversion messages:", result.messages);
        }
        return styledHtml;
      } catch (error) {
        console.error("转换文档时出错:", error);
        return "";
      }
    },
    onFileChange(value) {
      const file = this.$refs.file.files[0];
      console.log("file: ", file);
      if (file) {
        this.docxToHtml(file).then((html) => {
          console.log("html: ", html);
          this.htmlContent = html;
        });
      }
    },
  },
};
</script>

<style lang="less">
div {
  padding: 20px;
}
.word-content {
  font-family: Times New Roman, serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  background: #ccc;
}
.page-break {
  page-break-before: always;
  break-before: page;
  // height: 40px;
  // height: 800px;
  background: #fff;
  margin: 40px 0;
}
:deep(h1) {
  font-size: 24px;
  font-weight: bold;
  margin: 16px 0;
}

:deep(h2) {
  font-size: 20px;
  font-weight: bold;
  margin: 14px 0;
}

:deep(h3) {
  font-size: 18px;
  font-weight: bold;
  margin: 12px 0;
}

:deep(p) {
  margin: 8px 0;
  line-height: 1.6;
}

:deep(.align-center) {
  text-align: center;
}

:deep(.align-right) {
  text-align: right;
}

:deep(.align-justify) {
  text-align: justify;
}

:deep(table) {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
}

:deep(td),
:deep(th) {
  border: 1px solid #ddd;
  padding: 8px;
}

:deep(ul),
:deep(ol) {
  margin: 8px 0;
  padding-left: 20px;
}

:deep(li) {
  margin: 4px 0;
}

.multicolumn {
  column-count: 2; /* 分成 3 栏 */
  column-gap: 20px; /* 栏之间的间距 */
}

.word-document {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  font-family: "Times New Roman", Times, serif;
  padding: 40px;

  :deep(p),
  :deep(div) {
    margin: 8px 0;
    line-height: 1.6;
    min-height: 1em;
  }

  :deep(p[align="center"]) {
    text-align: center !important;
  }

  :deep(p[align="right"]) {
    text-align: right !important;
  }

  :deep(p[align="justify"]) {
    text-align: justify !important;
  }

  :deep(p[align="left"]) {
    text-align: left !important;
  }

  :deep([style*="text-align"]) {
    text-align: inherit;
  }

  :deep(span[style*="color"]) {
    color: inherit;
  }

  :deep(span[style*="background-color"]) {
    background-color: inherit;
  }

  :deep(h1) {
    font-size: 24px;
    font-weight: bold;
    margin: 16px 0;
    text-align: inherit;
  }

  :deep(h2) {
    font-size: 20px;
    font-weight: bold;
    margin: 14px 0;
    text-align: inherit;
  }

  :deep(h3) {
    font-size: 18px;
    font-weight: bold;
    margin: 12px 0;
    text-align: inherit;
  }

  :deep(table) {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
  }

  :deep(td),
  :deep(th) {
    border: 1px solid #ddd;
    padding: 8px;
  }

  :deep(ul),
  :deep(ol) {
    margin: 8px 0;
    padding-left: 20px;
  }

  :deep(li) {
    margin: 4px 0;
  }

  :deep(.center) {
    text-align: center !important;
  }

  :deep(.right) {
    text-align: right !important;
  }

  :deep(.justify) {
    text-align: justify !important;
  }

  :deep(span[style*="color"]) {
    display: inline;
  }

  :deep(span[style*="background-color"]) {
    display: inline;
  }
}

// .word-document {
//   width: 100%;
//   max-width: 800px;
//   margin: 0 auto;
//   font-family: "Times New Roman", Times, serif;

//   :deep(p) {
//     margin: 1em 0;
//     line-height: 1.6;
//     min-height: 1em;
//   }

//   :deep(h1),
//   :deep(h2),
//   :deep(h3),
//   :deep(h4),
//   :deep(h5),
//   :deep(h6) {
//     margin: 1em 0;
//     font-weight: bold;
//   }

//   :deep(h1) {
//     font-size: 2em;
//   }
//   :deep(h2) {
//     font-size: 1.5em;
//   }
//   :deep(h3) {
//     font-size: 1.17em;
//   }

//   :deep(table) {
//     border-collapse: collapse;
//     margin: 1em 0;
//     width: 100%;
//   }

//   :deep(td),
//   :deep(th) {
//     border: 1px solid #ddd;
//     padding: 8px;
//   }

//   :deep(ul),
//   :deep(ol) {
//     margin: 1em 0;
//     padding-left: 2em;
//   }

//   :deep(li) {
//     margin: 0.5em 0;
//   }

//   // 确保所有样式继承都正确
//   :deep([style*="text-align"]) {
//     text-align: inherit;
//   }

//   :deep([style*="color"]) {
//     color: inherit;
//   }

//   :deep([style*="background-color"]) {
//     background-color: inherit;
//   }

//   :deep([style*="font-family"]) {
//     font-family: inherit;
//   }

//   :deep([style*="font-size"]) {
//     font-size: inherit;
//   }
// }
</style>
